<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/11/1
  Time: 23:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>SCL症状统计页面</title>
    <script type="application/javascript" src="${pageContext.request.contextPath}/static/layui-v2.7.6/layui/layui.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui-v2.7.6/layui/css/layui.css">
</head>
<body>

<%--模糊查询的form表单--%>
<form class="layui-form" action="">
    <%--刷新页面按钮--%>
    <button style="margin-left:12px" class="layui-btn layui-btn-radius layui-btn-xs layui-btn-warm layui-icon layui-icon-refresh-1" onClick="document.location.reload()"></button>

    <div class="layui-inline">
        <label class="layui-form-label">测试人名字</label>
        <div class="layui-input-inline">
            <input type="text" name="username" placeholder="请输入测试人名字" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">电话</label>
        <div class="layui-input-inline">
            <input type="text" name="tel" placeholder="请输入电话" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-inline">
        <div class="layui-input-inline">
            <button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<%-- 显示所有做题记录的table --%>
<table class="layui-hide" id="test" lay-filter = "test"></table>

<script>
    layui.use(['table','layer','form','jquery'], function(){
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var $ = layui.jquery;
        var namestatus=true;

        table.render({
            elem: '#test',
            page:true,
            limit:10,
            limits:[10,20,30,40],
            url:'${pageContext.request.contextPath}/tSclRecord/statistics', //表格了里面所需要的数据就是一个list里面有很多的map、对象
            cellMinWidth: 150, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            cols: [[
                {type:'numbers',fixed: 'left',title:'序号'},
                // field 后面跟的内容  必须跟后台传过来的数据里面的map 的key保持一致
                {field:'username',fixed: 'left', title: '测试人',width: 100, sort: true},
                {field:'tel', title: '电话', sort: true},
                {field:'f1', title: 'F1',width: 70, sort: true},
                {field:'f1fx', title: 'F1躯体化', sort: true},
                {field:'f2', title: 'F2',width: 70, sort: true},
                {field:'f2fx', title: 'F2强迫', sort: true},
                {field:'f3', title: 'F3',width: 70, sort: true},
                {field:'f3fx', title: 'F3人际关系', sort: true},
                {field:'f4', title: 'F4',width: 70, sort: true},
                {field:'f4fx', title: 'F4抑郁', sort: true},
                {field:'f5', title: 'F5',width: 70, sort: true},
                {field:'f5fx', title: 'F5焦虑', sort: true},
                {field:'f6', title: 'F6',width: 70, sort: true},
                {field:'f6fx', title: 'F6敌对性', sort: true},
                {field:'f7', title: 'F7',width: 70, sort: true},
                {field:'f7fx', title: 'F7恐怖', sort: true},
                {field:'f8', title: 'F8',width: 70, sort: true},
                {field:'f8fx', title: 'F8偏执', sort: true},
                {field:'f9', title: 'F9',width: 70, sort: true},
                {field:'f9fx', title: 'F9精神病性', sort: true},
                {field:'f10', title: 'F10',width: 75, sort: true},
                {field:'f10fx', title: 'F10睡眠及饮食', sort: true},
                {field:'createtime', title: '测试时间',width: 180, sort: true}
            ]]
        });

        //模糊查询事件
        form.on('submit(formDemo)', function(data){
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            //alert(JSON.stringify(data.field))
            table.reload('test', {
                //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                where: data.field,//排序字段
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    });
</script>

</body>
</html>
